<template>
  <auto-scale-container
      :base-width="1920"
      :base-height="1080"
      mode="fill"
      :transition="false"
      style="background: #000"
      id="fullscreenId"
    >
    <div class="home" :style="animationStyle">
      <visual-header :weather="weatherData"/>
      <el-row class="content-box">
        <el-col :span="24" class="middle-top" :class="unfoldFoldShow ? 'middle-top_true' : 'middle-top_init'">
          <div class="module_01">
            <visual-card :name="$t('Byname1')" color="#d9001b">
               <queryList 
                @change-query="changeQuery" 
                @change-city="changeCity"
                @change-brand="changeBrand"
                @change-shop="changeShop"
                :year_month="year_month" 
                />
            </visual-card>
          </div>
          <div class="module_02">
            <visual-card :name="$t('Byname2')" color="#2779c7">
              <indexListPanel1 :span="1" :data="indicator1"/>
            </visual-card>
          </div>
          <div class="module_03">
            <visual-card :name="$t('Byname3')" color="#2779c7">
              <indexListPanel1 :span="3" :data="indicator5"/>
            </visual-card>
          </div>
          <div class="module_03_1">
            <visual-card :name="$t('Byname63')" color="#2779c7">
              <indexListPanel1 :span="2" :data="indicator6"/>
            </visual-card>
          </div>
          <div class="module_04">
            <visual-card :name="$t('Byname4')" color="#2779c7">
              <indexListPanel1 :span="1" :data="indicator2"/>
            </visual-card>
          </div>
          <div class="module_05">
            <visual-card :name="$t('Byname5')" color="#2779c7">
              <indexListPanel1 :span="1" :data="indicator3"/>
            </visual-card>
          </div>
          <div class="module_06">
            <visual-card :name="$t('Byname6')" color="#2779c7">
              <indexListPanel1 :span="1" :data="indicator4"/>
            </visual-card>
          </div>
        </el-col>
        <el-col :span="24" class="middle-center">
          <div class="module_07" :class="unfoldFoldShow ? 'middle-center_true' : 'middle-center_init'">
            <visual-card :name="$t('Byname7')" color="#2779c7">
              <theBestSellingVehicleOfThisMonth :data="basicRankList" @sort-change="sortChange1"/>
            </visual-card>
          </div>
          <div class="module_08" :class="unfoldFoldShow ? 'module_08_true' : 'module_08_init'">
            <visual-card :name="$t('Byname8')" color="#2779c7">
              <template v-slot:operate>
                <el-cascader
                  class="EhlCascader1"
                  ref="myCascader2"
                  style="width:170px;margin-left: 10px;"
                  clearable
                  size="mini"
                  collapse-tags
                  :props="{ multiple: true, checkStrictly: true }"
                  :options="citysList"
                  :placeholder="$t('Byname48')"
                  v-model="cityValue"
                  @change="changeData3">
                </el-cascader>
                <many-select-box 
                  style="width:170px;margin-left: 10px;"
                  :placeholder="$t('Byname47')"
                  :data="dataObj.shops"
                  :shopValue="shopValue"
                  @change-city="changeData4">
                </many-select-box>
                <el-cascader
                  class="EhlCascader1"
                  ref="myCascader1"
                  style="width:170px;margin-left: 10px;"
                  clearable
                  size="mini"
                  collapse-tags
                  :props="{ multiple: true, checkStrictly: true }"
                  :options="brandList"
                  :placeholder="$t('Byname49')"
                  v-model="brandValue"
                  @change="changeData5">
                </el-cascader>
                <el-input 
                  style="width:170px;margin-left: 10px;" 
                  size="mini" 
                  v-model="plate_number" 
                  :placeholder="$t('Byname50')" 
                  @input="changeInput()">
                </el-input>
              </template>
              <map-google :data="mapData" :carObj="carObj"/>
              <visualFullscreen @unfoldFold="unfoldFold"/>
            </visual-card>
            <el-col :span="24" class="middle-bottom" :class="unfoldFoldShow ? 'middle-bottom_true' : 'middle-bottom_init'">
              <div class="module_10">
                <visual-card :name="$t('Byname9_1')" color="#2779c7">
                  <template v-slot:operate>今日的预约件数 {{ latestNumber || 0 }} 件</template>
                  <latestRealTimeOrders :data="recentData" @sort-change="sortChange2" />
                </visual-card>
              </div>
              <div class="module_11">
                <visual-card :name="$t('Byname9_2')" color="#2779c7">
                  <template v-slot:operate>
                    <el-date-picker
                      v-model="monthValue1"
                      style="width:200px"
                      size="mini"
                      type="month"
                      format="yyyy-MM"
                      value-format="yyyy-MM"
                      @change="changeData1"
                      :picker-options="pickerOptions"
                      :placeholder="$t('Byname43')">
                    </el-date-picker>
                  </template>
                  <base-tabs
                    :tabs="tabs"
                    :tabSelectedIndex="selectedIndex1"
                    @tabChange="tabChange1"
                    style="margin-top:5px"
                  />
                  <numberOfOrdersInThePastSevenDays :data="basicAvgData1" type="1" />
                </visual-card>
              </div>
              <div class="module_12">
                <visual-card :name="$t('Byname9_3')" color="#2779c7">
                  <template v-slot:operate>
                    <el-date-picker
                      v-model="monthValue2"
                      style="width:200px"
                      size="mini"
                      type="month"
                      format="yyyy-MM"
                      value-format="yyyy-MM"
                      @change="changeData2"
                      :picker-options="pickerOptions"
                      :placeholder="$t('Byname43')">
                    </el-date-picker>
                  </template>
                  <base-tabs
                    :tabs="tabs"
                    :tabSelectedIndex="selectedIndex1"
                    @tabChange="tabChange2"
                    style="margin-top:5px"
                  />
                  <numberOfOrdersInThePastSevenDays :data="basicAvgData2" type="2"/>
                </visual-card>
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="middle-bottom" :class="unfoldFoldShow ? 'middle-bottom_true' : 'middle-bottom_init'">
          <!-- <div class="module_09">
            <visual-card :name="$t('Byname9')" color="#2779c7">
              <template v-slot:operate>
                <el-cascader
                  ref="myCascader3"
                  class="EhlCascader1"
                  style="width:130px;margin-left: 10px;"
                  clearable
                  size="mini"
                  collapse-tags
                  :props="{ multiple: true, checkStrictly: true }"
                  :options="citysList"
                  :placeholder="$t('Byname48')"
                  v-model="cityValue"
                  @change="changeData6">
                </el-cascader>
                <el-cascader
                  ref="myCascader"
                  class="EhlCascader1"
                  style="width:130px;margin-left: 10px;"
                  clearable
                  size="mini"
                  collapse-tags
                  :props="{ multiple: true, checkStrictly: true }"
                  :options="brandList"
                  :placeholder="$t('Byname49')"
                  v-model="brandValue"
                  @change="changeData7">
                </el-cascader>
              </template>
              <totalNumberOrders :data="basicShoppieData"/>
            </visual-card>
          </div> -->
          <!-- <div class="module_10">
            <visual-card :name="$t('Byname9_1')" color="#2779c7">
              <template v-slot:operate>今日的预约件数 {{ latestNumber || 0 }} 件</template>
              <latestRealTimeOrders :data="recentData" @sort-change="sortChange2" />
            </visual-card>
          </div>
          <div class="module_11">
            <visual-card :name="$t('Byname9_2')" color="#2779c7">
              <template v-slot:operate>
                <el-date-picker
                  v-model="monthValue1"
                  style="width:200px"
                  size="mini"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="changeData1"
                  :picker-options="pickerOptions"
                  :placeholder="$t('Byname43')">
                </el-date-picker>
              </template>
              <base-tabs
                :tabs="tabs"
                :tabSelectedIndex="selectedIndex1"
                @tabChange="tabChange1"
                style="margin-top:5px"
              />
              <numberOfOrdersInThePastSevenDays :data="basicAvgData1" type="1" />
            </visual-card>
          </div>
          <div class="module_12">
            <visual-card :name="$t('Byname9_3')" color="#2779c7">
              <template v-slot:operate>
                <el-date-picker
                  v-model="monthValue2"
                  style="width:200px"
                  size="mini"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="changeData2"
                  :picker-options="pickerOptions"
                  :placeholder="$t('Byname43')">
                </el-date-picker>
              </template>
              <base-tabs
                :tabs="tabs"
                :tabSelectedIndex="selectedIndex1"
                @tabChange="tabChange2"
                style="margin-top:5px"
              />
              <numberOfOrdersInThePastSevenDays :data="basicAvgData2" type="2"/>
            </visual-card>
          </div> -->
        </el-col>
      </el-row>
    </div>
  </auto-scale-container>
  
</template>

<script>
// V 1.0
// import { getHomeIndex, lastestsevensales, getareatotals, getWeather, getMapData, getCity} from '@/api/mapApi.js'
// V 2.0
import { 
  getBasicLatest, 
  getBasicRank, 
  getBasicAvg, 
  getBasicShoppie, 
  getBasicShop, 
  getBasicBusiness, 
  getBasicSales, 
  getBasic,
  getMapDataV2,
  getWeather,
  getCarDetail
} from '@/api/mapApi.js'

import AutoScaleContainer from '@/components/AutoScaleContainer'
import VisualHeader from './vue/visual-header'
import VisualCard from './vue/visual-card'
// 全屏按钮
import visualFullscreen from './vue/visual-fullscreen'
// // 指标
// import indexListPanel from './vue/index-list-panel'
// 指标
import indexListPanel1 from './vue/index-list-panel1'
// tab 标签
import baseTabs from './component/base-tabs'
// 下拉框
import selectBox from './component/select-box'
// 下拉框-多选
import manySelectBox from './component/many-select-box'
// 总订单数
import totalNumberOrders from './component/total-number-orders'
// 车型订单分布
import vehicleModelOrder from './component/vehicle-model-order'
// 近七日订单数
import numberOfOrdersInThePastSevenDays from './component/number-of-orders-in-the-past-seven-days'
// 最新实时订单
import latestRealTimeOrders from './component/latest-real-time-orders'
// 本月最热销的车辆
import theBestSellingVehicleOfThisMonth from './component/the-best-selling-vehicle-of-this-month'
// 近7日销售额
import salesRevenueInThePastSevenDays from './component/sales-revenue-in-the-past-seven-days'
// 本月销售排行门店
import thisMonthsSalesRankingStores from './component/this-months-sales-ranking-stores'
// 筛选条件
import queryList from './component/query-list'
// 地图
import mapGoogle from './component/map-google'

export default {
  name: "Index",
  components: { 
    AutoScaleContainer,
    VisualHeader,
    VisualCard,
    visualFullscreen,
    // indexListPanel,
    indexListPanel1,
    baseTabs,
    totalNumberOrders,
    vehicleModelOrder,
    numberOfOrdersInThePastSevenDays,
    latestRealTimeOrders,
    theBestSellingVehicleOfThisMonth,
    salesRevenueInThePastSevenDays,
    thisMonthsSalesRankingStores,
    queryList,
    mapGoogle,
    selectBox,
    manySelectBox,
  },
  data() {
    return {
      // 版本号
      version: "3.8.9",
      unfoldFoldShow: true,
      visible: false,
      duration: '0s', // 可以动态修改这个值
      dataPanelData: [], // 指标
      weekSalesData: [], // 近7日订单销售额
      basicAvgData1: {}, // 平均使用次数
      basicAvgData2: {},
      basicShoppieData: {}, // 门店与车辆占比
      shopSaleAmountData: [], // 本月销售排行门店
      recentData: [], // 最新实时订单
      latestNumber:'', // 今日的预约件数
      basicRankList: [], // 本月最热销的车辆
      orderData: [], // 车型订单数量
      carTypeList: [], // 车型总类
      mapData: [], // 地图数据
      monthSales: '', // 月销售额
      pollInterval: null,
      cityId: '', // 城市id
      value: '',
      cityName: undefined, // 城市名称
      weatherData: {
        conditions: '',
        minTemperatura: 0,
        maxTemperatura: 0,
        icon: '',
      }, // 天气信息
      tabs: [{ label: '区域', type:1},{ label: '品牌车型',type:2},{ label: '车辆类型',type:3}],
      tabs3: [{ label: '平均销售额', type:2},{ label: '平均使用次数',type:1}],

      selectedIndex1: 0,
      selectedIndex2: 0,
      type1: 1,
      source: 2,
      pickerOptions: {
        disabledDate: (time) => {
          // 获取当前日期
          const current = new Date();
          const currentYear = current.getFullYear();
          const currentMonth = current.getMonth() + 1; // 月份从0开始，所以要+1
          
          // 获取选择框的日期
          const selectDate = new Date(time);
          const selectYear = selectDate.getFullYear();
          const selectMonth = selectDate.getMonth() + 1;
          
          // 禁用当年的未来月份和往年的所有月份
          if (selectYear > currentYear) {
            return true; // 禁用未来年份
          } else if (selectYear === currentYear && selectMonth > currentMonth) {
            return true; // 禁用当前年的未来月份
          }
          
          return false;
        }
      },
      monthValue1: '',
      monthValue2: '',
      indicator1: [
        { name: '门店数', value: 0 },
        { name: '车辆数', value: 0 },
      ],
      indicator2: [
        { name: '营业额', value: 0 },
        { name: '利用回数', value: 0 },
      ],
      indicator3: [
        { name: '使用中', value: 0 },
        { name: '未使用', value: 0 },
      ],
      indicator4: [
        { name: '当月', value: 0 },
        { name: '累计', value: 0 },
      ],
      indicator5: [
        { name: '营业额', value: 0 },
        { name: '前月比(%)', value: 0 },
        { name: '前年比(%)', value: 0 },
        { name: '利用回数', value: 0 },
        { name: '前月比次数', value: 0 },
        { name: '前年比次数', value: 0 },
      ],
      indicator6: [
        { name: '收款金额', value: 0 },
        { name: '未收款金额', value: 0 },
        { name: '收款单数', value: 0 },
        { name: '未收款单数', value: 0 },
      ],
      queryData: {},
      plate_number: '',
      carObj: [],
      dataObj: {},
      citysList: [],
      brandList: [],
      year_month: '',
      source1: '',
      source2: '',
      cityValue: [],
      brandValue: [],
      shopValue: []
    }
  },
  computed: {
    animationStyle() {
      return {
        '--duration': this.duration,
      }
    }
  },
  created() {
    this.$eventBus.$on('change-city', this.init);
    this.$eventBus.$on('change-Language', this.init);
    this.initData()
    // 十分钟
    this.pollInterval = setInterval(this.initData, 1000 * 60 * 10)
  },

  methods: {
    init(){
      this.tabs = [
        { label: this.$t('Byname60'), type:1},
        { label: this.$t('Byname61'),type:2},
        { label: this.$t('Byname46'),type:3}
      ]
      this.indicator1[0].name = this.$t('Byname30')
      this.indicator1[1].name = this.$t('Byname31')

      this.indicator2[0].name = this.$t('Byname32')
      this.indicator2[1].name = this.$t('Byname35')

      this.indicator3[0].name = this.$t('Byname38')
      this.indicator3[1].name = this.$t('Byname39')

      this.indicator4[0].name = this.$t('Byname40')
      this.indicator4[1].name = this.$t('Byname41')

      this.indicator5[0].name = this.$t('Byname32')
      this.indicator5[1].name = this.$t('Byname33')
      this.indicator5[2].name = this.$t('Byname36')
      this.indicator5[3].name = this.$t('Byname35')
      this.indicator5[4].name = this.$t('Byname34')
      this.indicator5[5].name = this.$t('Byname37')

      this.indicator6[0].name = this.$t('Byname64')
      this.indicator6[1].name = this.$t('Byname65')
      this.indicator6[2].name = this.$t('Byname66')
      this.indicator6[3].name = this.$t('Byname67')
    },
    formatNumberAdvanced(num, options = {}) {
      const {
        decimals = 2,
        locale = 'en-US',
        currency = null,
        trimTrailingZeros = true  // 新增选项：是否去除末尾零
      } = options;
      
      if (num === null || num === undefined || isNaN(Number(num))) {
        return '--';
      }
      
      const numberValue = Number(num);
      
      const formatOptions = {
        minimumFractionDigits: trimTrailingZeros ? 0 : decimals,
        maximumFractionDigits: decimals,
      };
      
      if (currency) {
        formatOptions.style = 'currency';
        formatOptions.currency = currency;
      }
      
      return new Intl.NumberFormat(locale, formatOptions).format(numberValue);
    },
    changeQuery(e){
      console.log('----------', e)
      this.queryData = e
      this.monthValue1 = e.year_month
      this.monthValue2 = e.year_month
      this.initData()
    },
    changeCity(e){
      this.cityValue = e
    },
    changeBrand(e){
      this.brandValue = e
    },
    changeShop(e){
      this.shopValue = e
    },
    changeInput(){
      if(this.plate_number){
        let params = {
          language: 'jp',
          plate_number: this.plate_number
        }
        getCarDetail(params).then(res => {
          if(res.status == '200'){
            this.carObj = [res.data]
          }else{
            this.carObj = []
          }
        }).catch(error => {
          this.carObj = []
        });
      }else{
        this.carObj = []
      }
    },
    getBasicData(){
      let params = {}
      getBasic(params).then(res=>{
        if(res.status == '200'){
          this.dataObj = res.data
          // 城市区域 转换为 Cascader 需要的格式
          this.citysList = res.data.citys.map(item => ({
            value: item.cid,
            label: item.title,
            children: item.children ? item.children.map(child => ({
              value: child.id,
              label: child.title,
              // children: child.children || []
            })) : []
          }))
          // 品牌车型 转换为 Cascader 需要的格式
          this.brandList = res.data.brand.map(item => ({
            value: item.id,
            label: item.title,
            children: item.children ? item.children.map(child => ({
              value: child.id,
              label: child.title,
              // children: child.children || []
            })) : []
          }))
        }
      })
    },
    /**
     * 获取地图图层数据
     */
    getMapData(){
      let params = {
        language: 'jp',
        ...this.queryData
      }
      getMapDataV2(params).then(res => {
        if(res.status == '200'){
          this.mapData = res.data.shops
        }
      })
    },

    /**
     * 获取天气信息
     */
    getWeather(){
      let params = {
        cityid: this.cityId,
        lang: 'jp',
      }
      getWeather(params).then(res=>{
        if(res.status == '200'){
          this.weatherData = {
            conditions: res.data.conditions,
            minTemperatura: res.data.tempmin,
            maxTemperatura: res.data.tempmax,
            icon: res.data.icon,
          }
        }
      })
    },
    /**
     * 最新注文情报
     */
    getBasicLatestData(sort, type){
      let params = {
        language: 'jp',
        sort: sort || '0',
        type: type || '1',
        cid: this.cityId
      }
      getBasicLatest(params).then(res=>{
        if(res.status == '200'){
          this.latestNumber = res.data.number
          this.recentData = res.data.orders.map(val=>{
            return {
              shop_title_plate_number: `${val.shop_title}${val.plate_number}`,
              ...val
            }
          })
        }
      })
    },

    /**
     * 销售业绩排序
     * @param sort 
     * @param type 
     */
    getBasicRankData(sort, type){
      let params = {
        language: 'jp',
        sort: sort || '1',
        type: type || '0',
        ...this.queryData
      }
      getBasicRank(params).then(res=>{
        if(res.status == '200'){
          this.basicRankList = res.data.list.map(val=>{
            return {
              shop_title_plate_number: val.car_title,
              ...val
            }
          })
        }
      })
    },

    /**
     * 平均销售额
     */
    getBasicAvgData1(){
      let params1 = {
        language: 'jp',
        source: 2,
        type: this.source1,
        year_month: this.monthValue1 || this.queryData.year_month,
      }
      getBasicAvg(params1).then(res=>{
        if(res.status == '200'){
          this.basicAvgData1 = res.data
        }
      })
    },

    /**
     * 平均使用次数
     */
    getBasicAvgData2(){
      let params1 = {
        language: 'jp',
        source: 1,
        type: this.source2,
        year_month: this.monthValue2 || this.queryData.year_month,
      }
      getBasicAvg(params1).then(res=>{
        if(res.status == '200'){
          this.basicAvgData2 = res.data
        }
      })
    },

    /**
     * 门店于车子占比
     */
    getBasicShoppieData(){
      let params = {
        language: 'jp',
        cid: this.cityId,
        ...this.queryData
      }
      // getBasicShoppie(params).then(res=>{
      //   if(res.status == '200'){
      //     this.basicShoppieData = res.data
      //   }
      // })
    },
    /**
     * 门店&车辆数
     */
    getBasicShopData(){
      let params = {
        language: 'jp',
        year_month: this.queryData.year_month || '',
        ...this.queryData
      }
      getBasicShop(params).then(res=>{
        if(res.status == '200'){
          this.indicator1 = [
            { name: this.$t('Byname30'), value: this.formatNumberAdvanced(res.data.shopCount) },
            { name: this.$t('Byname31'), value: this.formatNumberAdvanced(res.data.carsCount) }
          ]
        }
      })
    },
    /**
     * 昨日营业额&利用回数
     */
    getBasicBusinessData(){
      let params = {
        language: 'jp',
        year_month: this.queryData.year_month || ''
      }
      getBasicBusiness(params).then(res=>{
        if(res.status == '200'){
          this.indicator2 = [
            { name: this.$t('Byname32'), value: this.formatNumberAdvanced(res.data.amount) },
            { name: this.$t('Byname35'), value: this.formatNumberAdvanced(res.data.amount_num) },
          ]
          this.indicator3 = [
            { name: this.$t('Byname38'), value: this.formatNumberAdvanced(res.data.used) },
            { name: this.$t('Byname39'), value: this.formatNumberAdvanced(res.data.unused) },
          ]
          this.indicator4 = [
            { name: this.$t('Byname40'), value: this.formatNumberAdvanced(res.data.userCountMonth) },
            { name: this.$t('Byname41'), value: this.formatNumberAdvanced(res.data.userCount) },
          ]
        }
      })
    },
    /**
     * 本月销售额&结算收款情况
     */
    getBasicSalesData(){
      let params = {
        language: 'jp',
        ...this.queryData
      }
      getBasicSales(params).then(res=>{
        if(res.status == '200'){
          this.indicator5 = [
            { name: this.$t('Byname32'), value: this.formatNumberAdvanced(res.data.amount) },
            { name: this.$t('Byname33'), value: this.formatNumberAdvanced(res.data.percent1) }, // 前月比
            { name: this.$t('Byname36'), value: this.formatNumberAdvanced(res.data.percent3) }, // 前年比营业额
            { name: this.$t('Byname35'), value: this.formatNumberAdvanced(res.data.times) },
            { name: this.$t('Byname34'), value: this.formatNumberAdvanced(res.data.percent2) }, // 前月比次数
            { name: this.$t('Byname37'), value: this.formatNumberAdvanced(res.data.percent4) }, // 前年比次数
          ]
          this.indicator6 = [
            { name: this.$t('Byname64'), value: this.formatNumberAdvanced(res.data.successAmount) }, // 成功金额 收款金额(元)
            { name: this.$t('Byname65'), value: this.formatNumberAdvanced(res.data.failureAmount) }, // 失败金额 未收款金额(元)
            { name: this.$t('Byname66'), value: this.formatNumberAdvanced(res.data.successTimes) }, // 成功订单数 收款单数
            { name: this.$t('Byname67'), value: this.formatNumberAdvanced(res.data.failureTimes) }, // 失败次数 未收款单数
          ]
        }
      })
    },
    
    tabChange1(index,item) {
      this.source1 = item.type
      this.selectedIndex1 = index
      this.getBasicAvgData1()
    },
    tabChange2(index,item){
      this.source2 = item.type
      this.selectedIndex2 = index
      this.getBasicAvgData2()
    },
    changeData1(item){
      this.monthValue1 = item
      this.getBasicAvgData1()
    },
    changeData2(item){
      this.monthValue2 = item
      this.getBasicAvgData2()
    },
    changeData3(val){
      if(val && val.length){
        // 第一个数组：所有子数组的第一位数字
        const firstNumbers = val.map(item => item[0]);
        // 第二个数组：长度大于1的子数组的第二位数字
        const secondNumbers = val
          .filter(item => item.length > 1)
          .map(item => item[1]);
        this.queryData.cid = [...new Set(firstNumbers)].join()
        this.queryData.sid = secondNumbers.join()
      } else {
        this.queryData.cid = ''
        this.queryData.sid = ''
      }
      this.getMapData()
    },
    changeData4(item){
      this.queryData.shopid = item
      this.getMapData()
    },
    changeData5(val){
      if(val && val.length){
        // 第一个数组：所有子数组的第一位数字
        const firstNumbers = val.map(item => item[0]);
        // 第二个数组：长度大于1的子数组的第二位数字
        const secondNumbers = val
          .filter(item => item.length > 1)
          .map(item => item[1]);
        this.queryData.car_bid = [...new Set(firstNumbers)].join()
        this.queryData.car_sid = secondNumbers.join()
      } else {
        this.queryData.car_bid = ''
        this.queryData.car_sid = ''
      }
      this.getMapData()
    },
    changeData6(val){
      console.log('val-->>', val)
      if(val && val.length){
        // 第一个数组：所有子数组的第一位数字
        const firstNumbers = val.map(item => item[0]);
        // 第二个数组：长度大于1的子数组的第二位数字
        const secondNumbers = val
          .filter(item => item.length > 1)
          .map(item => item[1]);
        this.queryData.cid = [...new Set(firstNumbers)].join()
        this.queryData.sid = secondNumbers.join()
      } else {
        this.queryData.cid = ''
        this.queryData.sid = ''
      }
      // this.$refs.myCascader3.dropDownVisible = false;
      this.getBasicShoppieData()
    },
    changeData7(val){
      console.log('val-->>', val)
      if(val && val.length){
        // 第一个数组：所有子数组的第一位数字
        const firstNumbers = val.map(item => item[0]);
        // 第二个数组：长度大于1的子数组的第二位数字
        const secondNumbers = val
          .filter(item => item.length > 1)
          .map(item => item[1]);
        this.queryData.car_bid = [...new Set(firstNumbers)].join()
        this.queryData.car_sid = secondNumbers.join()
      } else {
        this.queryData.car_bid = ''
        this.queryData.car_sid = ''
      }
      console.log('this.queryData', this.queryData)
      // this.queryData.car_bid = item[item.length - 1]
      // this.$refs.myCascader.dropDownVisible = false;
      this.getBasicShoppieData()
    },
    sortChange1(item){
      let type = item.column.label == "利用回数"?'1':'0'
      let sort = item.order == "ascending"?'0':'1'
      this.getBasicRankData(sort, type)
    },
    sortChange2(item){
      let type = item.column.label == "销售额"?'1':'0'
      let sort = item.order == "ascending"?'0':'1'
      this.getBasicLatestData(sort, type)
    },
    initData(e){
      this.cityId = e?e:this.cityId
      this.getBasicLatestData()
      this.getBasicRankData()
      this.getBasicAvgData1()
      this.getBasicAvgData2()
      this.getBasicShoppieData()
      this.getBasicShopData()
      this.getBasicBusinessData()
      this.getBasicSalesData()
      this.getMapData()
      this.getWeather()
      this.getBasicData()
    },
    unfoldFold(e){
      this.unfoldFoldShow = e
      this.duration = '1s';
    }
  },
  beforeDestroy() {
    clearInterval(this.pollInterval)
  },
}
</script>
<style lang="scss">
//级联框样式
.el-input {
  .el-input__inner {
    color: #000;
    font-size: 18px;
    border: 0;
    &::placeholder {
      color: #000;
    }
  }
}
//级联框样式
.EhlCascader1 {
  &.el-cascader {
    height: 30px;
    line-height: 30px;
    .el-cascader__tags {
      .el-tag {
        color: #222b45;
        background-color: #ebeff4;
        max-width: 57px !important;

        .el-tag__close {
          color: #fff;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  color: #fff;
  background-image: url('./assets/image/backgroundImage.png');
  background-color: rgba(9, 53, 107, 1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .content-box{
    width: 100%;
    height: calc(100% - 114px);
    padding: 15px;
    pointer-events: none;
    position: relative;
      .middle-top {
        display: flex;
        justify-content: left;
        .module_01{
          width: 440px;
          height: 230px;
          pointer-events: auto;
        }
        .module_02 {
          width: 150px;
          height: 230px;
          margin-left: 10px;
          pointer-events: auto;
        }
        .module_03 {
          width: 470px;
          height: 230px;
          margin-left: 10px;
          pointer-events: auto;
        }
        .module_03_1{
          width: 330px;
          height: 230px;
          margin-left: 10px;
          pointer-events: auto;
        }
        .module_04 {
          width: 150px;
          height: 230px;
          margin-left: 10px;
          pointer-events: auto;
        }
        .module_05 {
          width: 150px;
          height: 230px;
          margin-left: 10px;
          pointer-events: auto;
        }
        .module_06 {
          width: 150px;
          height: 230px;
          margin-left: 10px;
          pointer-events: auto;
        }
      }
      .middle-center {
        display: flex;
        justify-content: left;
        .module_07 {
          width: 440px;
          height: 720px;
          margin-top: 10px;
          pointer-events: auto;
        }
        .module_08 {
          width: 1440px;
          height: 460px;
          margin-left: 10px;
          margin-top: 10px;
          pointer-events: auto;
        }
      }
      .middle-bottom {
        display: flex;
        justify-content: left;
        .module_09 {
          width: 440px;
          height: 250px;
          margin-top: 10px;
          pointer-events: auto;
        }
        .module_10 {
          width: 474px;
          height: 250px;
          // margin-top: 10px;
          // margin-left: 10px;
          pointer-events: auto;
        }
        .module_11 {
          width: 474px;
          height: 250px;
          // margin-top: 10px;
          margin-left: 10px;
          pointer-events: auto;
        }
        .module_12 {
          width: 474px;
          height: 250px;
          // margin-top: 10px;
          margin-left: 10px;
          pointer-events: auto;
        }
      }
      .middle-top_init{
        animation: top_init var(--duration) forwards;
      }
      .middle-center_init{
        animation: center_init var(--duration) forwards;
      }
      .middle-bottom_init{
        animation: bottom_init var(--duration) forwards;
      }
      .middle-top_true{
        transform: translateX(0); /* 初始位置 */
        animation: top_true var(--duration) forwards;
      }
      .middle-center_true{
        transform: translateX(0); /* 初始位置 */
        animation: center_true var(--duration) forwards;
      }
      .middle-bottom_true{
        transform: translateX(0); /* 初始位置 */
        animation: bottom_true var(--duration) forwards;
      }
      // @keyframes top_init {
      //   from { transform: translateY(0); }
      //   to { transform: translateY(-300px); }
      // }
      // @keyframes top_true {
      //   from { transform: translateY(-300px); }
      //   to { transform: translateY(0); }
      // }
      // @keyframes center_init {
      //   from { transform: translateX(0); }
      //   to { transform: translateX(-500px); }
      // }
      // @keyframes center_true {
      //   from { transform: translateX(-500px); }
      //   to { transform: translateX(0); }
      // }
      // @keyframes bottom_init {
      //   from { transform: translateY(0); }
      //   to { transform: translateY(+300px); }
      // }
      // @keyframes bottom_true {
      //   from { transform: translateY(+300px); }
      //   to { transform: translateY(0); }
      // }
      .module_08_true {}
      .module_08_init {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 20px) !important;
        height: 100% !important;
        z-index: 1;
      }
    }
  }
</style>


